<template>
  <div>
    <el-alert title="查询信息" type="info" :closable="false"></el-alert>
    <el-form inline :model="form">
      <el-form-item label="用户名">
        <el-input
          v-model="form.userName"
          size="medium"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始时间"
          size="medium"
          v-model="form.startTime"
          default-time="00:00:00"
          :picker-options="startTimePicker"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束时间"
          size="medium"
          v-model="form.endTime"
          default-time="00:00:00"
          :picker-options="endTimePicker"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="medium" @click="search(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-alert title="日志信息列表" type="info" :closable="false"></el-alert>
    <el-table :data="tableData" stripe v-loading="loading">
      <el-table-column
        label="用户名称"
        prop="userName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作内容"
        prop="operateRemark"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作时间"
        prop="createTime"
        align="center"
      ></el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-col :span="10">
        <el-pagination
          background
          :current-page="pageData.currentPage"
          layout="total, prev, pager, next, jumper"
          :total="pageData.count"
          :page-size="pageData.pageSize"
          @current-change="handleCurrentChange"
          v-if="pageData.count && pageData.count != 0"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "LogManagement",
  data() {
    return {
      form: {
        userName: "",
        startTime: "",
        endTime: "",
      },
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      loading: null,
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
  },
  methods: {
    queryLogList(queryData) {
      this.loading = true;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":${queryData.currentPage},\\"pageSize\\":10},\\"userName\\":\\"${queryData.userName}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"listOperateLogInfoByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading = false;
        this.pageData = res.data.parameter.page;
        let list = res.data.parameter.list;
        for (let i = 0; i < list.length; i++) {
          list[i].createTime = moment(list[i].createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        this.tableData = list;
      });
    },
    search(currentPage) {
      let startTime, endTime;
      if (this.form.startTime != "") {
        startTime = moment(this.form.startTime).format("YYYY-MM-DD");
      } else {
        startTime = "";
      }
      if (this.form.endTime != "") {
        endTime = moment(this.form.endTime).format("YYYY-MM-DD");
      } else {
        endTime = "";
      }
      let queryData = {
        currentPage: currentPage,
        startTime: startTime,
        endTime: endTime,
        userName: this.form.userName,
      };
      this.queryLogList(queryData);
    },
    handleCurrentChange(val) {
      this.search(val);
    },
  },
  created() {
    let queryData = {
      startTime: "",
      endTime: "",
      userName: "",
      currentPage: "1",
    };
    this.queryLogList(queryData);
  },
};
</script>

<style lang="less" scoped>
.el-alert {
  line-height: 30px;
  margin-top: 20px;
  /deep/ .el-alert__title {
    font-size: 16px;
  }
}
.el-form {
  margin: 20px 0;
  margin-left: 30px;
}
</style>